<template>
  <div>
    <p>
      <span style="font-size: 18px;font-weight: bold;color: red;">*</span>
      第 {{ serial + 1 }} 题: {{ question.question }}
    </p>

    <!-- 单选题 -->
    <div v-if="type === 1">
      <el-radio-group v-model="radio" size="small">
        <p><el-radio label="A" border>{{ question.optionA }}</el-radio></p>
        <p><el-radio label="B" border>{{ question.optionB }}</el-radio></p>
        <p><el-radio label="C" border>{{ question.optionC }}</el-radio></p>
        <p><el-radio label="D" border>{{ question.optionD }}</el-radio></p>
      </el-radio-group>
    </div>

    <!-- 多选题 -->
    <div v-if="type === 2">
      <el-checkbox-group v-model="multi" size="small">
        <p><el-checkbox label="A" border>{{ question.optionA }}</el-checkbox></p>
        <p><el-checkbox label="B" border>{{ question.optionB }}</el-checkbox></p>
        <p><el-checkbox label="C" border>{{ question.optionC }}</el-checkbox></p>
        <p><el-checkbox label="D" border>{{ question.optionD }}</el-checkbox></p>
      </el-checkbox-group>
    </div>

    <!-- 判断题 -->
    <div v-if="type === 3">
      <el-radio-group v-model="judge" size="small">
        <span><el-radio label="A" border>{{ question.optionA }}</el-radio></span>
        <span><el-radio label="B" border>{{ question.optionB }}</el-radio></span>
      </el-radio-group>
    </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      radio: this.type === 1 ? this.answer || '' : '',
      multi: this.type === 2 ? this.answer || [] : [],
      judge: this.type === 3 ? this.answer || '' : ''
    }
  },
  created() {
    /* 多选题类型转换 */
    if( this.type === 2 ){ // 如果你是多选题类型的
      if( this.multi instanceof Array){ // 并且类型是数组, 那么不管
      }else{
        // 不是数组类型, 在判断是否存在值
        if( this.multi ){ // 有值
          // 把数据变成数组
          this.multi = this.multi.split("");
        }else{
          this.multi = []
        }
      }
    }
  },
  methods: {},
  props: ['type', 'question', 'serial', 'answer'],
  watch: {
    radio(value){
      this.$emit('on-children-change', value, this.question.id);
    },
    multi(value){
      this.$emit('on-children-change', value, this.question.id);
    },
    judge(value){
      this.$emit('on-children-change', value, this.question.id);
    }
  }
}
</script>

<style scoped>
.el-radio-group p, .el-checkbox-group p{
  margin: 7px 25px;
}
.el-radio-group span{
  margin-left: 25px;
}
</style>
